<template>

	<uni-popup ref="popupRef" :animation="false" border-radius="10px 10px 0 0" background-color="#fff">
		<view style="height: 80vh; padding: 30rpx;">
			<view class="select-address-title">
				<span>地址</span>
				<u-button @click="close" type="primary" size="mini" plain>取消</u-button>
			</view>

			<view class="select-address-content">
				<u-form :model="form" ref="uForm" label-width="180rpx" label-align="left"
					:label-style="{color: '#777'}">
					<view class="select-address-textarea">
						<input v-model="addressText" placeholder="粘贴地址识别" @blur="searchAddress" />
					</view>
					<u-form-item label="姓名" prop="realName" left-icon="account" :left-icon-style="{color: '#777'}">
						<input v-model="form.realName" placeholder="请输入姓名" />
					</u-form-item>
					<u-form-item label="电话" prop="mobile" left-icon="phone" :left-icon-style="{color: '#777'}">
						<input v-model="form.mobile" type="tel" placeholder="请输入电话" />
					</u-form-item>
					<u-form-item label="地区" prop="region" left-icon="map" :left-icon-style="{color: '#777'}">
						<input v-model="form.fullName" :disabled="true" placeholder="请选择地区" @click="openRegion" />
					</u-form-item>
					<u-form-item label="详细地址" prop="address" left-icon="map" :left-icon-style="{color: '#777'}">
						<input v-model="form.address" placeholder="请输入详细地址" />
					</u-form-item>
					<view class="default-wrapper" style="margin: 28rpx 0;" @click="setIsDefault">
						<view :class="['default-icon', {'default-icon-active': form.isDefault == 1}]">
							<u-icon name="checkmark" size="20rpx" color="#fff"></u-icon>
						</view>
						<view class="">
							设为默认地址
						</view>
					</view>
				</u-form>
				<view class="select-address-footer">
					<u-button v-if="form.userAddressId" type="primary" plain shape="circle"
						@click="delAddressData">删除</u-button>
					<view class="" v-if="form.userAddressId" style="width: 40rpx; height: 10rpx;"></view>
					<u-button style="flex:1;" @click="submit" type="primary" shape="circle">提交</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- <u-picker ref="regionPopupRef" v-model="isShowRegion" mode="region" @confirm="confirmRegion"
				:default-value="regionValue">
			</u-picker> -->
		<u-picker-region ref="regionPopupRef" mode="region" @confirm="confirmRegion"></u-picker-region>
	</uni-popup>

</template>

<script>
	import {
		trim,
		replace
	} from 'lodash'
	const defaultForm = () => ({
		realName: '',
		mobile: '',
		city: '',
		province: '',
		county: '',
		address: '',
		fullName: '',
		isDefault: 0,
		userAddressId: '',
		provinceVal: 0,
		cityVal: 0,
		areaVal: 0
	})
	export default {
		data() {
			return {
				addressText: '',
				show: false,
				isShowRegion: false,
				signData: {
					title: '选择地址'
				},
				regionValue: [],
				form: defaultForm()
			}
		},
		computed: {

		},
		methods: {
			searchAddress() {
				if (!this.addressText) {
					return
				}
				this.$u.api.postBaiduAddress({
					addressText: trim(replace(this.addressText, /\s+/g, ''))
				}).then(res => {
					const data = res.data
					this.form.regionId = data?.county_code;
					this.form.fullName = `${data?.province}${data?.city}${data?.county}`
					this.form.province = data?.province
					this.form.city = data?.city
					this.form.area = data?.county
					this.form.provinceVal = data?.province_code
					this.form.cityVal = data?.city_code
					this.form.areaVal = data?.county_code
					this.form.realName = data?.person
					this.form.address = `${data?.town}${data.detail}`
					this.form.mobile = data?.phonenum
				})
			},
			openModal(signData) {
				this.signData = signData
				Object.assign(this.form, signData)
				this.show = true
				this.$refs.popupRef.open('bottom')
			},
			close() {
				this.$refs.popupRef.close()
				this.show = false
			},
			confirmRegion(val) {
				const {
					area,
					city,
					province
				} = val
				console.log(val)
				this.form.regionId = area?.value;
				this.form.fullName = `${province?.label}${city?.label}${area?.label}`
				this.form.province = province.label
				this.form.city = city.label
				this.form.area = area.label
				this.form.provinceVal = province.value
				this.form.cityVal = city.value
				this.form.areaVal = area.value
				
			},
			setIsDefault() {
				this.form.isDefault = this.form.isDefault == 1 ? 0 : 1
			},
			async submit() {
				const res = await this.postAddUserAddress()
				if (!res) {
					return
				}
				this.$emit('confirm', {
					...this.signData,
					...this.form
				})
				this.show = false
				this.close()
			},
			delAddressData() {
				this.$u.api
					.postDeleteUserAddress({
						userAddressId: this.form.userAddressId
					})
					.then(res => {
						console.log(res, '[收货地址列表页-删除地址接口]');
						this.$refs.uToast.show({
							title: '删除地址成功'
						});
						this.isShowDelAddress = false;
						this.$emit('delete', this.form.userAddressId)
						this.close()
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 添加收货地址
			postAddUserAddress() {
				// 判断收货人姓名是否为空
				if (this.$u.test.isEmpty(this.form.realName)) {
					this.$refs.uToast.show({
						title: '收货人姓名不能为空'
					})
					return false;
				}

				// 判断手机号是否为空
				if (this.$u.test.isEmpty(this.form.mobile)) {
					this.$refs.uToast.show({
						title: '收货人手机号不能为空'
					})
					return false;
				}

				// 判断地区是否为空
				if (this.$u.test.isEmpty(this.form.area)) {
					this.$refs.uToast.show({
						title: '收货人地区不能为空'
					})
					return false;
				}

				// 判断详细地址是否为空
				if (this.$u.test.isEmpty(this.form.address)) {
					this.$refs.uToast.show({
						title: '收货人详细地址不能为空'
					})
					return false;
				}
				return new Promise((resolve, reject) => {
					const api = this.form.userAddressId ?
						this.$u.api.postEditUserAddress :
						this.$u.api.postAddUserAddress
					api(this.form)
						.then(res => {
							this.$emit('confirm', this.form)
							this.form = defaultForm()
							resolve(res)
						})
						.catch(err => {
							console.log(err);
						});
				})
			},
			setDefault() {
				if (this.form.isDefault == 1) {
					this.form.isDefault = 0;
				} else {
					this.form.isDefault = 1;
				}
			},
			openRegion() {
				this.$refs.regionPopupRef.open({
					areaCode: [this.form.provinceVal || 0, this.form.cityVal || 0, this.form.areaVal || 0]
				})
				// this.isShowRegion = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-address {
		// width: 100vw;
		// height: 100vh;
	}

	.select-address-title {
		font-size: 36rpx;
		display: flex;
		justify-content: space-between;
	}

	.select-address-content {
		padding: 20rpx 10rpx;
	}

	.default-wrapper {
		display: flex;
		align-items: center;
	}

	.default-icon {
		width: 35rpx;
		height: 35rpx;
		border-radius: 10rpx;
		border: solid 1rpx #3D9C9A;
		color: #fff;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&-active {
			background-color: #3D9C9A;
		}
	}

	.select-address-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.select-address-textarea {
		margin: 10rpx;
		box-sizing: border-box;
		border: solid 1rpx #ddd;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>